
import React,{useState,forwardRef,useRef,useEffect,useImperativeHandle} from 'react'
import {Form,Row,Col,Button,Tabs} from 'antd'
import {getResourceButtons} from '@utils/store'
import './index.css'

// form表单布局
export const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 6,
    },
  }
}
const {TabPane} = Tabs


const Item = ({children})=>{
  return <>{children}</>
}
const sliceBtns = (btns )=>{
  let list = getResourceButtons()||[]
  let btn = btns.filter(it=>!it.isHide).filter(it=>{
    // return true
    return !it.permission || list?.find(i=>i.permission===it.permission)
  })
  return btn
}

const App = (props,parentRef)=>{
	let [form] = Form.useForm()
  let {
    children,
    initialValues={},
    groupBtns=[],
    defaultSpan=6,
    onTabChange=()=>{},// tabPanel 切换事件
    tabList=[],       // tabPanle list
    activeKey=''     // 默认 选择
  } = props
  const [defaultActionKey,setActiveKey] = useState(activeKey)
	const [childs,setChilds] = useState(()=>{
		return Array.isArray(children) ? children : [children]
	})
  let [btns,setBtns]=useState(sliceBtns(groupBtns))
  useEffect(()=>{
    setBtns(sliceBtns(groupBtns))
  },[groupBtns])
  useEffect(()=>{
    let childs = Array.isArray(children) ? children : [children]
    setChilds([...childs])
  },[children])
	useImperativeHandle(parentRef,()=>{
		return {
			onSubmit:()=>{
				return new Promise((resolve)=>{
					form.validateFields().then(res=>{
            res._key = Math.random().toString(16)
            res.currentPage = 1
						resolve(res)			  	
			  	}).catch(errorInfo=>{
            console.log(errorInfo)
			  	})
				})
			},
			onReset:()=>{
				return new Promise((resolve)=>{
          let fields = Object.keys(initialValues)
          fields._key = Math.random().toString(16)
					form.resetFields(fields)
					resolve({...initialValues,currentPage:1})
				})
			}	
		}
	})
	
	return <div id="search-form-component" className='search-form'>
		<Form form={form} {...formItemLayout}  initialValues={initialValues}>
    	<Row span={24}>
        {
          childs.map((child,i)=>{
            return <Col className="admin-search-col" span={defaultSpan} key={i}>
              {child}
            </Col>
          })
        }
			</Row>
      <Row span={24}>
        <div className='admin-group-btn'>
          <Tabs activeKey={defaultActionKey} onTabClick={(key,item)=>{
            setActiveKey(key)
            onTabChange(key)
          }}>
            {
              tabList.map(it=><TabPane tab={it.text} key={it.key} />)
            }
          </Tabs>
          <div>
            {
              btns.map((it,index)=>{
                let {file=false,accept,htmlType='button'}=it
                return <Item key={'group-'+index}>
                  {
                    file?<div className='import-btn'>
                      <Button type={'dashed'}>
                        {it.text}
                      </Button>
                      <input type="file" accept={accept} onChange={it.onChange} />
                    </div>:<Button htmlType={htmlType}  type={'dashed'} onClick={_=>{
                      it.onClick(form)
                    }}>{it.text}</Button>
                  }
                </Item>
              })
            }
          </div>
        </div>
      </Row>  
		</Form>
	</div>
}
export default forwardRef(App)